<template>
  <a-modal
    v-model:visible="props.showVisible"
    :title="showTitle"
    width="700px"
    style="padding: 50px"
    class="abb"
    :footer="null"
    @cancel="close"
  >
    <div class="box">
      <a-form :labelCol="{ span: 24 }" :model="formList" @finish="onFinish" ref="formRef">
        <a-form-item
          label="区域名称"
          name="areaName"
          :rules="[{ required: true, message: '请输入区域名称!' }]"
        >
          <a-input v-model:value="formList.areaName" placeholder="请输入区域名称" />
        </a-form-item>

        <a-form-item
          label="车位数(个)"
          name="spaceNumber"
          :rules="[{ required: true, message: '请输入车位数!' }]"
        >
          <a-input v-model:value="formList.spaceNumber" placeholder="请输入车位个数" />
        </a-form-item>

        <a-form-item
          label="面积(㎡)"
          name="areaProportion"
          :rules="[{ required: true, message: '请输入面积!' }]"
        >
          <a-input placeholder="面积" v-model:value="formList.areaProportion" />
        </a-form-item>
        <a-form-item
          label="关联计费规则"
          name="ruleId"
          :rules="[{ required: true, message: '请选择关联计费规则!' }]"
        >
          <a-select placeholder="请选择" v-model:value="formList.ruleId">
            <a-select-option v-for="item in getRuleList" :key="item.ruleId" :value="item.ruleId">{{
              item.ruleName
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-textarea v-model:value="formList.remark" placeholder="请输入备注" />
        </a-form-item>
        <a-form-item>
          <a-button type="text" @click="close">取消</a-button>
          <a-button type="primary" html-type="submit">确定</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script setup>
import { computed, ref } from 'vue'
import { addArea, getRule, putArea } from '../../../api/car/car-area.js'
import { message } from 'ant-design-vue'
const formRef = ref(null)
const props = defineProps({
  showVisible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['addFormList', 'update:showVisible'])
const formList = ref({
  areaName: '',
  spaceNumber: '',
  areaProportion: '',
  ruleId: '',
  remark: '',
  id: null
})
//表单验证完成
const onFinish = async (values) => {
  if (formList.value.id) {
    await putArea(formList.value)
    message.success('更新成功')
  } else {
    await addArea(values)
    message.success('新增成功')
  }

  emit('addFormList')
  close()
}
const showTitle = computed(() => {
  return formList.value.id ? '编辑区域' : '添加区域'
})
//关闭弹窗
const close = () => {
  emit('update:showVisible', false)
  formList.value = {
    areaName: '',
    spaceNumber: '',
    areaProportion: '',
    ruleId: '',
    remark: ''
  }
  formRef.value.resetFields()
}
//获取计费规则
const getRuleList = ref([])

const getRuleApi = async () => {
  const res = await getRule()
  getRuleList.value = res.data
  console.log(getRuleList.value)
}
const showRuleApi = (record) => {
  console.log(record)
  formList.value.areaName = record.areaName
  formList.value.spaceNumber = record.spaceNumber
  formList.value.areaProportion = record.areaProportion
  formList.value.ruleId = record.ruleId
  formList.value.remark = record.remark
  formList.value.id = record.id
}
//向外暴露
defineExpose({
  getRuleApi,
  showRuleApi
})
</script>
<style lang="scss" scoped>
:deep(.ant-form) {
  padding: 0 60px;
}
</style>
